<template>
  <div class="w search-wrapper">
    <div class="search-box">
      <div class="search">
        <div class="position" @click="showDialog">
          <p>深圳</p>
          <span class="el-icon-caret-bottom"></span>
        </div>
        <div class="search-input">
          <input type="text" placeholder="搜索职位、公司" />
        </div>
        <a class="search-button">搜索</a>
      </div>
      <div class="login">
        <span class="el-icon-d-arrow-right"></span> 登录，查看更多岗位
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LSearch',
  methods: {
    showDialog() {
      this.$emit('clickShowDialog')
    },
  },
}
</script>

<style scoped>
/* 搜索框 */
.search-box {
  display: flex;
  justify-content: space-between;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 884px;
  height: 54px;
  border: 2px solid #00bebd;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.position {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 136px;
  font-size: 16px;
  font-weight: 400;
  color: #222;
  padding: 14px 24px 14px 18px;
  box-sizing: border-box;
  cursor: pointer;
}
.position:hover span {
  color: #00bebd;
}
.position:hover {
  color: #00bebd;
}
.position span {
  font-size: 12px;
  color: #ccc;
}
.search-input {
  flex: 1;
  width: 100%;
}
.search-input input {
  width: 100%;
  height: 52px;
  font-size: 16px;
  border: none;
  outline: 0;
  padding: 14px 18px;
  box-sizing: border-box;
  border-radius: 12px;
}
.search-button {
  width: 116px;
  height: 54px;
  padding: 11px 0;
  display: block;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  background-color: #00bebd;
}

/* 登录按钮 */
.login {
  width: 284px;
  box-sizing: border-box;
  border: 1px solid #00bebd;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #00a6a7;
  text-align: center;
  line-height: 54px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.login:hover {
  color: #fff;
  background-color: #00a6a7;
}
</style>
